<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>数据控制</h3>
        <p>提供在配置完成复杂功能和监控的特殊配置属性，该属性提供模板语法的简单数据调用方法，或功能运行监控方案</p>

        <h5>计算属性</h5>
        <p>1.计算:因为属性定义是通过设置劫持功能的set和get方法完成，所以方法中可以扩展任意的其它逻辑代码进行数据控制</p>
        <p>2.属性:提供类似于data数据仓库的属性定义，同样可以在页面模板语法中作为属性被使用 【计算属性也是vue的一个数据仓库】</p>
        <p>data-msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <p>computed-info:{{ info }}</p>
        <input  type="text" v-model="info"/>
        <p>data-textTemp:{{ textTemp }}</p>
        <input  type="text" v-model="textTemp"/>
        <p>computed-text:{{ text }}</p>
        <input  type="text" v-model="text"/>
        <hr>
        <p>计算属性具有缓存特性：因为具有缓存，所以在vue的统计操作中计算属性具有更好的性能表现</p>
        <ol>
            <li>在计算属性使用时，如果计算属性涉及的变量(依赖变量)没有发生变化，计算属性只会在初始时执行一次并完成数据缓存</li>
            <li>后续的该计算属性的多次调用都是直接从缓存中获取数据</li>
            <li>当计算属性涉及的变化(依赖变量)发生变化时，计算属性才会完成一次重新运行，并将运行的结果进行缓存</li>
        </ol>
        <ul>
            <li v-for="(item,i) in arr">
                <input type="number" v-model.number="arr[i]">
            </li>
        </ul>
        <hr>
        <!-- 当模板语法取值方法结果时,在当前页面无关变量更新时,依然会再次调用这些方法 -->
        <p>arr-sum:{{ sum() }}</p>
        <p>arr-sum:{{ sum() }}</p>
        <p>arr-sum:{{ sum() }}</p>
        <p>arr-sum:{{ sum() }}</p>
        <hr>
        <!-- 当模板语法取值计算属性结果时,在当前页面无关变量更新时,计算属性方法不会重新执行 -->
        <p>arr-csum:{{ csum }}</p>
        <p>arr-csum:{{ csum }}</p>
        <p>arr-csum:{{ csum }}</p>
        <p>arr-csum:{{ csum }}</p>

    </div>
    <script type="module"> 
        /*
            data 提供响应式数据构成
            computed 配合data完成复杂或多边逻辑的属性定义
            methods 提供事件回调方法或执行逻辑方法
        */

        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        const vm = createApp({
            data(){
                return {
                    msg:"data中的msg变量",
                    textTemp:"text的中间变量",
                    arr:[
                        1,2,3,4,5
                    ]
                }
            },
            /*
                computed:{
                    key:value
                }
                key 自定义属性名
                value Function|Object
                      + Function 只为当前属性提供 getter 方法功能【只读】
                      + Object = { get:function(){},set:function(){} }
                                 同时提供 getter 和 setter 方法功能
                ** 计算属性中 getter 和 setter 方法中的this 指向于 vue实例对象
            */
            computed: {
                // [Vue warn]: Computed property "info" has no getter. 
                // vue的计算属性实际上是将属性构建数据劫持时的 get 和 set 功能暴露给开发者进行自行描述,
                //      由开发者定义 get 方法的返回结果
                //      由开发者定义 set 方法完成数据修改控制
                // info:"computed中的info变量"
                
                // info 只提供了 get 方法
                info:function() {
                    return "computed中的info变量"
                },
                // text 可读可写的属性
                text:{
                    // getter
                    get:function(){
                        console.log("get:",this)
                        // return "computed中的text变量"
                        // return this.textTemp;
                        if(this.textTemp==""){
                            return "暂无值"
                        }else{
                            return this.textTemp;
                        }
                    },
                    // setter
                    set(nv){
                        console.log("set:",this)
                        console.log("computed中的text变量-被修改",nv)
                        if(nv.length<=10){
                            this.textTemp = nv;
                        }
                    }
                },
                csum() {
                    // return this.arr.reduce((pre,cur)=> pre+cur ,0)
                    console.log("csum"+Math.random())
                    let temp = 0;
                    for (let item of this.arr) {
                        temp += item;
                    }
                    return temp;
                }
            },
            methods: {
                sum() {
                    // return this.arr.reduce((pre,cur)=> pre+cur ,0)
                    console.log("sum"+Math.random())
                    let temp = 0;
                    for (let item of this.arr) {
                        temp += item;
                    }
                    return temp;
                }
            },
        }).mount("#app")
        console.log( vm )
    </script>
</body>
</html>